<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="defaulbg8 mw100">
			<!--  演示一个渐变背景，请根据项目实际需求自行改进  -->
			<graceHeader>
				<view class="grace-header-body" style="padding:0 20rpx;">
					<graceNavBar
						:items="tabs"
						:animatie="true"
						lineHeight="70rpx"
						textAlign="left"
						:isCenter="false"
						activeDirection="left"
						activeColor="#1E9FFF"
						activeLineHeight="4rpx"
						activeLineWidth="64rpx"
						activeFontSize="36rpx"
						:currentIndex="currentIndex"
						@change="navChange"
					></graceNavBar>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex"><graceSearch  :disabled="true" @tapme="tapme"></graceSearch></view>
					<!-- 设置按钮 -->
					<view class="grace-header-icons  grace-black6 fz18 pr" @tap="set">
						<text class="grace-icons icon-comments"></text>
						<text class="ksd-icon-dot iconfont icon-dot grace-red fz18"></text>
					</view>
				</view>
			</graceHeader>

			<view class="grace-body">
				<graceSwiper
					:width="730"
					:currentIndex="1"
					:spacing="0"
					:padding="0"
					:swiperItems="swiperItems"
					:height="315"
					indicatorType="dot"
					@taped="taped"
					indicatorBarBgColor="rgba(0,0,0, 0.2)"
				></graceSwiper>
			</view>
			<!--  左图 -->
			<view class="grace-news-list mt5">
			
				<view class="grace-news-item defaulbgf block mb8" @click="godetail(200)">
					<view class="block">
						<view class="pr fl">
							<image
								src="https://images.pexels.com/photos/2852438/pexels-photo-2852438.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
								class="grace-news-img grace-news-img-l"
							></image>
							<text class="tag bg-blue" style="position: absolute;top:5px;left:5px;padding:0 10px;">踩坑记录</text>
						</view>
						<view class="grace-news-body">
							<view class="fw fz14 grace-title block"><text class="pr">为什么炒股高手愿意分享自己的技术？</text></view>
							<text class="grace-news-desc">
								倘若不慎走失迷途，跌入水中，倘若不慎走有一条河流，叫重生。；任何去处，都是
							</text>
						</view>
					</view>
					<view class="title-msg fz12 color-gray mt2 block">
						<text class="pr10">
							<image
								src="https://thirdwx.qlogo.cn/mmopen/vi_32/p2kibtCm4Z9p8aDSL0oQRl67AZ7dPebnLV9ibZtsQP8CGQeLeKfuiaeLmdl4KDzNTYM5M3UJ46ZBmOJDPDwsAsn0w/132"
								class="ksd-avatar"
								alt=""
							/>
							<text class="mx-1">学相伴</text>
							<text class="svipicon"><text class="iconfont iconsvip"></text></text>
						</text>
						<text class="pr10">
							时间：
							<text>12-22 22:12</text>
						</text>
						<text class="pr4">
							浏览：
							<text>552</text>
						</text>
					</view>
				</view>

				<view class="grace-news-item defaulbgf mb8" @click="godetail(index)" v-for="(news, index) in newlist" :key="index">
					<view class="grace-news-body">
						<view class="fw fz14 grace-title block">
							<text class="tag bg-blue">踩坑记录</text>
							<text class="pr pl4">为什么炒股高手愿意分享自己的技术？</text>
						</view>
						<text class="grace-news-desc pt2">倘若不慎走失迷途，跌入水中，也应该记得，有一条河流，叫重生。这世上任何地方，都可以生长；任何去处，都是归宿</text>
						<view class="title-msg fz12 color-gray pt5">
							<text class="pr10">
								<image
									src="https://thirdwx.qlogo.cn/mmopen/vi_32/p2kibtCm4Z9p8aDSL0oQRl67AZ7dPebnLV9ibZtsQP8CGQeLeKfuiaeLmdl4KDzNTYM5M3UJ46ZBmOJDPDwsAsn0w/132"
									class="ksd-avatar"
									alt=""
								/>
								<text class="mx-1">学相伴</text>
								<text class="svipicon"><text class="iconfont iconsvip"></text></text>
							</text>
							<text class="pr10">
								时间：
								<text>12-22 22:12</text>
							</text>
							<text class="pr4">
								浏览：
								<text>552</text>
							</text>
						</view>
					</view>
				</view>
			
				<graceEmptyNew v-if="newlist.length == 0">
					<view slot="img" class="empty-view">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="empty-img" style="width: 240rpx;" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
					</view>
					<text slot="text" class="grace-text-small grace-gray">抱歉，没有搜索到任何数据</text>
				</graceEmptyNew>
			
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceNavBar from '../../graceUI/components/graceNavBar.vue';
import graceEmptyNew from "../../graceUI/components/graceEmptyNew.vue";
export default {
	data() {
		return {
			currentIndex: 0,
			tabs: ['江湖','资讯','更多'],
			newlist: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
			swiperItems: [
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/1.png',
					url: '',
					title: '测试标题 001',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/2.png',
					url: '',
					title: '测试标题 02',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/3.png',
					url: '',
					title: '测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/4.png',
					url: '',
					title: '测试标题04',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/5.png',
					url: '',
					title: '测试标题05',
					opentype: 'navigate'
				}
			]
		};
	},
	onPullDownRefresh(){
		setTimeout(()=>{
			uni.stopPullDownRefresh();
		},1000);
	},
	methods: {
		navChange: function(e) {
			this.currentIndex = e;
		},
		goback: function() {
			uni.navigateBack({});
		},
		set: function() {
			uni.navigateTo({
				url: '../msg/msg',
			});
		},
		swipernavChange: function(e) {
			var index = e.detail.current;
			this.currentIndex = index;
		},

		swiperchange: function(e) {
			console.log(e);
		},

		taped: function(e) {
			uni.showToast({
				title: '您点击了第 ' + e + ' 个项目',
				icon: 'none'
			});
		},
		godetail(index) {
			uni.navigateTo({
				url: './detail/detail?opid=' + index
			});
		},
		tapme:function(){
			uni.navigateTo({
				url: '../search/search'
			});
		},
	},
	components: { gracePage, graceNavBar,graceEmptyNew}
};
</script>
<style>
/* 请根据项目来规划自己的图片大小，请对图片进行等比缩放 */
.gui-search{width: 280rpx!important;}
.grace-news-img {
	width: 220rpx;
	height: 150rpx;
}
.big-img {
	width: 700rpx;
	height: 388rpx;
	overflow: hidden;
	margin: 15rpx 0;
}
.big-image {
	width: 700rpx;
	height: 388rpx;
	border-radius: 6rpx;
}
.grace-news-imgs-img {
	width: 225rpx;
}

.title-article .title-msg {
	margin-bottom: 10px;
	font-size: 12px;
}

.ksd-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	vertical-align: initial;
	top: 2px;
	position: relative;
}

.tag {
	margin: 1px 1px 1px 0;
	padding: 2px 10px;
	font-size: 12px;
	color: #fff;
	border-radius: 12px;
	background: var(--main-bg-color);
}
</style>
